<template>
  <div class="home">
    <!-- <van-nav-bar :title="route.meta.title || ''" left-arrow>
      <template #right>
        <img src="@/assets/images/more.png" alt="" />
      </template>
    </van-nav-bar> -->

    <HeadCom :title="route.meta.title || ''" />
    <!-- <SearchCom @searchEvent="searchEvent" /> -->
    <!-- <UserInfoCom :userName="userName || ''" :depName="depName || ''" /> -->
    <div class="main-content">
      <RouterView />
    </div>

    <van-tabbar v-model="active">
      <van-tabbar-item to="/workbench">
        <span>工作台</span>
        <template #icon="props">
          <img :src="active == 0 ? icon.workbench : icon.workbench1" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/scancode">
        <span>扫码</span>
        <template #icon="props">
          <img :src="active == 1 ? icon.scancode : icon.scancode1" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item to="/knowledge">
        <span>知识库</span>
        <template #icon="props">
          <img :src="active == 2 ? icon.knowledge : icon.knowledge1" /> </template
      ></van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script setup>
import { RouterView, useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
import { ref, reactive } from 'vue';
import workbench from '@/assets/images/workbench.png';
import workbench1 from '@/assets/images/workbench1.png';
import scancode from '@/assets/images/scancode.png';
import scancode1 from '@/assets/images/scancode1.png';
import knowledge from '@/assets/images/knowledge.png';
import knowledge1 from '@/assets/images/knowledge1.png';
const active = ref(0);
const userName = ref('张三疯');
const depName = ref('能源部');
// const titleList = reactive(['工作台','扫码','知识库']);
const icon = {
  workbench,
  workbench1,
  scancode,
  scancode1,
  knowledge,
  knowledge1,
};

function searchEvent(val) {
  console.log('searchEvent', val);
}
</script>
<style scoped lang="scss">
.home {
  width: 100%;

  .main-content {
    height: calc(100vh - 110px);
    overflow-y: auto;
    overflow-x: hidden;
  }
}
</style>
